<template>
	<div :class="{'contact-home' : btnStatus, 'contact-home-nav-status' : !btnStatus}">
		<home-header :bannerUrl="bannerUrl" @navBtn="btnChange"></home-header>
		<div class="content">
			<h3>联系我们</h3>
			<img src="../assets/img/map.jpg">
			<h6>联系方式</h6>
			<p>联系电话：010-57235722</p>
			<p>移动电话：18511263456</p>
			<p>投诉邮箱：hongkaimingjie@126.com</p>
			<p>维权邮箱：hongkaimingjie@163.com</p>
			<p>合作邮箱：hongkaimingjie@yeah.net</p>
			<p>地址：北京市石景山区古城西路113号景山财富中心</p>
		</div>
		<div class="input-box">
			<h4>在线留言</h4>
			<input type="text" name="name" class="name" placeholder="您的姓名">
			<input type="text" name="phone" class="phone" placeholder="您的电话">
			<textarea placeholder="咨询内容" class="text_content" rows ='3'></textarea>
			<a href="javascript:void(0);" class="commit">提交内容</a>
		</div>
		<home-footer></home-footer>
		<home-nav></home-nav>
	</div>
</template>

<script>
import HomeHeader from "@/Home/HomeHeader";
import HomeFooter from "@/Home/HomeFooter";
import HomeNav from "@/Home/HomeNav";

export default {
  name: "ContactHome",
  data() {
    return {
      btnStatus: true,
      bannerUrl: require("../assets/img/about-banner.jpg")
    };
  },
  methods: {
    btnChange: function(rs) {
      this.btnStatus = rs;
    }
  },
  components: {
    HomeHeader,
    HomeFooter,
    HomeNav
  }
};
</script>

<style lang="stylus" scoped>
.contact-home
	position relative
	transform translateX(0rem)
	transition all .5s linear
	width 100%
	overflow hidden
.contact-home-nav-status
	position relative
	transform translateX(-4.65rem)
	transition all .5s linear
.content
	width 96%
	padding 0 2%
	margin-bottom .4rem
	img
		width 100%
		display block
	p
		font-size .16rem
		color #343434
		text-align left
		line-height .52rem

.input-box
	background #e3e3e3
	padding .24rem .25rem .46rem .25rem
	text-align left
	h4
		font-size .2rem
		color #323232
		margin-bottom .1rem
		padding-left .08rem
	input
		width 97%
		height .36rem
		display block
		border none
		margin-top .16rem
		padding-left 3%
		font-size .14rem
		color #4d4d4d
		background-color #fafafa
	textarea
		border none
		width 96%
		margin-top .16rem
		padding-left 3%
		font-size .14rem
		color #4d4d4d
		background-color #fafafa
	a
		background-color #ffc507
		border-radius 5px
		text-align center
		width 1.42rem
		height .47rem
		font-size .2rem
		color #333
		font-weight bold
		display block
		line-height .47rem
		text-decoration none
		margin 0 auto
		margin-top .3rem
h3
	font-size .34rem
	color #333
	margin .37rem 0
	text-align center
h6
	font-size .2rem
	color #333
	margin .27rem 0
	text-align left
.desc
	width 96%
	padding 0 2%
	img
		width 100%
	p
		font-size .16rem
		color #2f2f2f
		text-align left
		line-height .34rem
		margin .1rem 0
</style>
